<template> 
	<div class='text-right'> 
		<router-link to='/edit_commodity'><a-button class='mb10' icon="edit">新增</a-button></router-link> 

		<a-table 
			:columns="columns" 
			:dataSource="data"    
			:rowKey="record => record.code"
			:pagination="pagination"
		>
 			<div slot='spuImg' slot-scope='text,record' >   
			    <a-card hoverable style="width:100px;height: 100px;" @click='imgGrow(text)'>
				    <img alt="example" :src='imgurlAddress(text)' slot="cover" /> 
				</a-card>
 			</div>
 			<span slot='spuName' slot-scope='text,record'>
 				{{text}} <br>
 				￥{{record.spuPrice}}
 			</span>  
 			<span slot='status' slot-scope='text,record'>
 				已{{text | commodityStatus}}
 			</span>
 			
 			<span slot='createTime' slot-scope='text,record'>
 				{{text | formatDate}}
 			</span>
 			<span slot="createTimeTitle"> {{_status | commodityStatus}}时间</span>
	        <span slot="action" slot-scope="text, record"> 
	        	<router-link :to='{path:"/edit_commodity",query:{code:record.code}}' class='color-blue'>编辑</router-link> 
				<a-divider type="vertical" />
				<a-popconfirm title="确认删除当前数据？" @confirm="del(record.code)"   okText="确认" cancelText="取消">
				  <a href="javascript:;"  class='color-red'>删除</a>
				</a-popconfirm>
	        </span>
	    </a-table>
	</div> 
</template>

<script type="text/javascript">
	const columns = [
		{
			title:'商品', 
		  	dataIndex:'spuImg',
		  	key:'spuImg',
		  	scopedSlots: { customRender: 'spuImg' }, 
		},
		{
		  	title:'商品价格', 
		  	dataIndex:'spuName',
		  	key:'spuName', 
		  	scopedSlots: { customRender: 'spuName' }, 
		},
		
		{
			title:'库存', 
		  	dataIndex:'spuNum',
		  	key:'spuNum',
		},
		{
			title:'销量', 
		  	dataIndex:'spuTag',
		  	key:'spuTag',
		},
		{
			title:'商品状态', 
		  	dataIndex:'status',
		  	key:'status',
		  	scopedSlots:{ customRender: 'status' },
		},
		{ 
			slots: { title: 'createTimeTitle' },
		  	dataIndex:'createTime',
		  	key:'createTime', 
		  	scopedSlots:{ customRender: 'createTime' },
		},
		{
			title:'操作', 
		  	dataIndex:'action',
		  	key:'action',
		  	scopedSlots: { customRender: 'action' }, 
		},
	]
	import { commodityList,delCommodity } from '@/api/minipro/commodity'
	export default{
		name:'commodity',
		data(){
			return {
				_status:'',//商品状态：已售罄，已上架，已下架
				columns,
				data:[],
			}
		},
		created(){
			this._status = this.$route.query.status
			console.log(this.$route.query.status)
			this.shopInit()
		},
		methods:{
			shopInit(){
				commodityList({pageNo:1,pageSize:10}).then((res)=>{
					this.data = res.data.dataList
				})
			},
			//img  src/grow
			imgurlAddress(code){
			 	return   process.env.BASE_API+'/op/fileupload/download_file?fileCode='+code
			},
			del(code){
				delCommodity(code).then((res)=>{
					this.$message.success(res.data.msg)
					this.shopInit()
				},(err)=>{
					console.log('promise error')
				})
			}
		}
		
	}
</script>